<template>
    <div class="f-s">
        <h1 style="margin-right:10px;">选择规格</h1>
        <el-select v-model="result" @change='emitHandle' @visible-change='visibleChange'>
            <el-option 
                v-for='item in product.attrTypeOptions'
                :key='item.id'
                :value='item.id'
                :label='item.key_name'
                :disabled='product.selectAttrIds.includes(item.id)'></el-option>
        </el-select>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        props : {
            value : {
                type : Number,
                default : null
            },
        },
        watch : {
            value : {
                handler : function (n) {
                    this.result = n
                },
                immediate : true
            }
        },
        computed : {
            ...mapState(['product']),
        },
        data () {
            return {
                result : null,
            }
        },
        created () {
            
        },
        methods : {
            emitHandle () {
                this.$emit('input', this.result);
                this.$emit('change', {
                    id : this.result,
                    name : this.options.filter(item => item.id == this.result)[0].name,
                    // key : this.options.filter(item => item.id == this.result)[0].key,
                });
            },
            visibleChange (opened) {
                if (!opened) return;
                this.options = this.product.attrTypeOptions;
                
            }
        }
    }
</script>

<style lang='less' scoped>

</style>